<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单位入口</title>
    <script src="../../../js/header.js"></script>
    <style>
        html,body,body>div{
            overflow: hidden;
        }
        #unitEntrance{
        	margin: 0;
        	padding: 0;
        }
        .tab-title{
			font-size: 16px;
			font-weight: bold;
			border-left: 4px solid #0D9AFF;
			font-family: PingFangSC-Medium;
			padding-left:10px;
			margin-bottom: 20px;
		}
		.el-input__inner {
			-webkit-appearance: none;
			background-color: #FFF;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #DCDFE6;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			color: #606266;
			display: inline-block;
			font-size: inherit;
			height: 30px;
			line-height: 30px;
			outline: 0;
			padding: 0 15px;
			-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		}
    </style>
</head>
<body>
    <div id="unitEntrance" style="overflow: hidden;">
        <el-row type="flex" justify="center">
            <el-col :span="15">
            	<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 20px;">
					  <el-breadcrumb-item :to="{ path: '/' }"  @click.native="gobackmain()">首页</el-breadcrumb-item>
					  <el-breadcrumb-item>单位入口</el-breadcrumb-item>					  
				</el-breadcrumb>
        		<el-form :model="unitInformation" :rules="rules" ref="unitInformation" label-width="140px" style="margin-top: 20px;">
					<el-row>
						<el-col :span="4" class="tab-title">
							评价/建筑单位注册
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="姓名:"  prop="name" label-width="110px">
								<el-input v-model="unitInformation.name"  placeholder=""  ></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="9">
							<el-form-item label="性别:" prop="sex" label-width="190px">
								<el-radio-group v-model="unitInformation.sex">
								    <el-radio label="男" >男</el-radio>
								    <el-radio label="女" >女</el-radio>
								 </el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="联系电话:"  prop="phone" label-width="110px">
								<el-input v-model="unitInformation.phone"  placeholder="" ></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="9">
							<el-form-item label="通讯地址:" prop="province" label-width="190px">
								<el-input v-model="unitInformation.province"  placeholder="" ></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="22">
							<el-form-item label="违法活动记录:" prop="appealContent" label-width="110px" :required="reRemarkRequired">
								<el-input							
										type="textarea"
										:autosize="{ minRows: 8, maxRows: 8}"
										placeholder=""
										maxlength="500"
										show-word-limit
										v-model="unitInformation.appealContent">
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>						
						<el-col :span="22">
							<el-form-item label="附件:" prop="" label-width="110px">						
								<iframe width="100%"  style="height: 200px;border: none;"   :src="link"></iframe>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="22">
							<div style="float:right;">
								<el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="onSubmit('unitInformation')">提交</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
            </el-col>   
        </el-row>
        
    </div>
</body>
<script>
    var unitEntrance = new Vue({
        el: '#unitEntrance',
        data(){
            return{
                uuid:'',
                link:'',//iframe链接
                
                unitInformation : {
                    id:"",
                    name: "",
                    sex: "",
                    phone:"",
                    province: "",
                    creatTime: "",
                    appealContent: "",                    
                },
                provinceValue:'',
                cityValue:'',
                areaValue:'',
                provinceData: [],
                cityData: [],
                areaData: [],
                rules: {
                    name: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '请选择性别',
                        trigger: 'change'
                    }],
                    phone: [{
                        required: true,
                        message: '请输入联系电话',
                        trigger: 'blur'
                    }],                   
                    province: [{
                        required: true,
                        message: '请输入通讯地址',
                        trigger: 'blur'
                    }],                                      
                    appealContent: [{
                        required: true,
                        message: '请输入违法活动记录',
                        trigger: 'blur'
                    },{
                        max : 500,
                        message : '请输入长度最大为500个字符',
                        trigger : 'blur'
                    }],
                    creatTime: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }]                                      
                }
            }
        },
        mounted(){
            //this.getUuid();
            if (window.history && window.history.pushState) {
		        // 向历史记录中插入了当前页
		        console.log('111')
		        history.pushState(null, null, document.URL);
		        window.addEventListener('popstate', this.goBack(), false);
		    }
        },
        destroyed () {
		    window.removeEventListener('popstate', this.goBack(), false);
		},
        methods: {
        	goBack () {
		        console.log("点击了浏览器的返回按钮");
		        sessionStorage.clear();
		        window.history.back();
		        history.pushState(null, null, document.URL);
		    }, 
            //获取UUID的方法
            getUuid() {
                axios({
                    method: 'get',
                    url: '/dzjwgr/uuid/getUuid',
                })
                .then(response => {
                    console.log(response);
                    if (response.data.code == 200) {
                        this.uuid = response.data.data;
                        this.link="../../upload/annex.html?uuid="+this.uuid+"&flag=1";
                        console.log(this.uuid);
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            // 表单提交
            onSubmit(formName) {
            	this.$refs[formName].validate((valid) => {
                    if (valid) {
		                this.unitInformation.id=this.uuid;
		                let date = new Date();
		                let y = date.getFullYear();
		                let MM = date.getMonth() + 1;
		                MM = MM < 10 ? ('0' + MM) : MM;
		                let d = date.getDate();
		                d = d < 10 ? ('0' + d) : d;
		                let h = date.getHours();
		                h = h < 10 ? ('0' + h) : h;
		                let m = date.getMinutes();
		                m = m < 10 ? ('0' + m) : m;
		                let s = date.getSeconds();
		                s = s < 10 ? ('0' + s) : s;
		               	console.log(y + '-' + MM + '-' + d);
		               	this.unitInformation.creatTime = y + '-' + MM + '-' + d;
		                axios({
		                    method: 'post',
		                    url: '/dzjwgr/appeal/addAppeal',
		                    data: this.unitInformation		                })
		                .then((response) => {
		                    let data = response.data;
		                    if (data.code == 200) {
		                        this.$message({
		                            type: 'success',
		                            message: '提交成功!'
		                        });
		                        this.getUuid();
		                        this.clearForm();
		                    } else {
		                        this.$message.error(data.msg);
		                    }
		                });
                	} else {
                        console.log("error!!");
                        return false;
                    }
                });
            },
            gobackmain(){
            	parent.vue.backIndex();
            },
			clearForm(){
				this.$refs.unitInformation.resetFields();
				this.unitInformation.id = '';
				this.unitInformation.name = '';
				this.unitInformation.sex = '';
				this.unitInformation.phone = '';
				this.unitInformation.province = '';
				this.unitInformation.creatTime = '';
				this.unitInformation.appealContent = '';
				
            },	
        
            chooseProvince(value){
                this.cityValue = '';
                this.areaValue = '';
                this.cityData = [];
                this.areaData = [];
                this.provinceData.map(e=>{//遍历数据
                    if( value == e.name){
                        this.cityData = e.cityList;
                        return;
                    }
                })
                console.log(value)
                this.constructionUnitEntity.location = value;
            },
            chooseCity(value){
                this.areaValue = '';
                this.cityData.map(e=>{//遍历数据
                    if( value == e.name){
                        this.areaData = e.areaList;
                        return;
                    }
                })
                this.constructionUnitEntity.location=this.constructionUnitEntity.location +"-" +value;
                console.log(this.constructionUnitEntity.location)
            },
            chooseArea(value){
                this.constructionUnitEntity.location=this.constructionUnitEntity.location +"-" +value;
            }

        }
    })
</script>
</html>